<!--
 @description 办事处-物流Tab内容页
 @fileName TabPage.vue
 @author zengqiongying
 @created 2021/06/26 16:39:24
-->
<template>
  <div class="main-page">
    <div class="wrapper">
      <div class="main-title" @click.stop="openIntro('logistics','6month')">
        <div style="flex:1;display:flex;align-items: center;">
          物流{{ tabTitle }}近6月趋势(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="ft12 color-99 fw-normal">
          本年总{{ tabTitle }}：<span class="color-red">{{ yearTotal | filterForamtThousand }}</span>车
        </div>
        <!-- <div class="chart-dot">
              <div class="dot green">今年</div>
              <div class="dot yellow">去年</div>
            </div> -->
      </div>
      <ship-six-month-chart v-if="tabName==='ship' " />
      <car-six-month-chart v-else />
    </div>

    <!-- <car-month-chart v-if="tabName==='car' " />
    <div v-else class="wrapper">
      <div class="main-title">当月{{ tabTitle }}趋势(车)</div>
      <ship-month-chart />
    </div>
 -->
  </div>
</template>

<script>
import ShipSixMonthChart from './ShipSixMonthChart'
import CarSixMonthChart from './CarSixMonthChart'
/* import ShipMonthChart from './ShipMonthChart'
import CarMonthChart from './CarMonth' */
import { parseTime } from '@/utils'
import { getLogisticsOfficeYearCareQuantity, getLogisticsOfficeYearShipQuantity } from '@/apis/logistics'
export default {
  name: 'OfficeLogisticsTabPage',
  components: {
    ShipSixMonthChart,
    CarSixMonthChart
    /* ShipMonthChart,
     CarMonthChart */
  },
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    },
    tabName: {
      type: String,
      default: 'ship'
    }
  },
  data() {
    return {
      provinceName: this.$route.query.provinceName || '',
      officeName: this.$route.query.officeName || '',
      yearTotal: 0, // 年度总数
      carTotal: 0 // 年度配车总数
    }
  },
  computed: {
    tabTitle() {
      return this.tabName === 'ship' ? '启运' : '配车'
    }
  },
  watch: {
    tabName(val, oldVal) {
      this.getLogisticsTotal()
    }
  },
  created() {
    this.getLogisticsTotal()
  },
  methods: {
    // 获取年度总量
    getLogisticsTotal() {
      const fetchFn = this.tabName === 'ship' ? getLogisticsOfficeYearShipQuantity : getLogisticsOfficeYearCareQuantity
      fetchFn(this.officeName).then(res => {
        this.yearTotal = res.data || '-'
      })
    },
    openIntro(code, type) {
      this.openInstrusction(code, `${this.tabName}_${type}`)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
